<template>
    <div class="main-content">
        <levelbar></levelbar>
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="query" ref="query" label-width="80px">
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="时间范围">
                                <el-select v-model="query.timeRange" placeholder="请选择时间范围" style="width:100%">
                                        <el-option v-for="(item,index) in timeArrs" 
                                        :key="index" :label="item.timeName" :value="item.timeId"> 
                                        </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="submit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="eCharts1" v-loading="loading1">
                <div class="charts-title">作业布置总数</div>
                <div class="charts-display">
                   <trendChart width='100%' height='100%' id="trendChart1" 
                   :option='lineChartOption'></trendChart>
                </div>
            </div>
            <div slot="eCharts2"  v-loading="loading2">
                <div class="charts-title">题库作业总数统计</div>
                <div class="charts-display">
                    <trendChart width='100%' height='100%' id="trendChart2" 
                    :option='bar1ChartOption'></trendChart>
                </div>
            </div>
            <div slot="eCharts3"  v-loading="loading3">
                <div class="charts-title">课外作业总数统计</div>
                <div class="charts-display">
                    <trendChart width='100%' height='100%' id="trendChart3" 
                    :option='bar2ChartOption'></trendChart>
                </div>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import Levelbar from '../../layout/Levelbar';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import trendChart from 'components/Charts/trendChart';
    import { countAll } from 'api/manageAnalysis';
    export default{
        components: { echartsLayout, Levelbar, trendChart},
        data() {
            return {
                formState: false,
                dataListState: true,
                eCharts1State: false,
                eCharts2State: false,
                eCharts3State: false,
                chartsListState: true,
                tableState: true,
                query: {
                    timeRange: '1' 
                },
                loading1: false,
                loading2: false,
                loading3: false,
                timeArrs: [
                    {timeName: '近30天', timeId: '1'},
                    // {timeName: '三个月', timeId: '3'},
                    // {timeName: '半年内', timeId: '6'},
                    {timeName: '近12月', timeId: '12'}
                ],
                lineChartOption: null,
                bar1ChartOption: null,
                bar2ChartOption: null
            }
        },
        created() {
            this.workTotle();
        },
        methods: {
            submit() {
                this.workTotle();
            },
            workTotle() {
                this.getTotalData();
                this.getQuesLib();
                this.getHomeWork();
            },

            // 作业布置总数统计
            getTotalData() {

                let timeRange = this.query.timeRange; // 时间范围"（默认本月，本月1，近三个月3，半年，一年12）,
                let type = ''; // "作业类型"（0课外作业，1题库作业）

                this.loading1 = true;
                countAll(timeRange, type).then(response => {
                    this.loading1 = false;
                    let legendList = ['布置人数', '布置次数', '提交人数', '提交次数'];
                    let xAxisList = [];
                    let peopleNumList = []; // 布置人数
                    let numList = []; // 布置次数
                    let commitNumList = []; // 提交人数
                    let commitList = []; // 提交次数
                    let dataList = response.data.content;
                    dataList = dataList.sort(function(a, b) {
                        return Date.parse(a.date) - Date.parse(b.date);
                    });
                    if (dataList.length) {
                        dataList.forEach(item => {
                            xAxisList.push(item.date);
                            peopleNumList.push(item.releaseHomeWorkBtnUser);
                            numList.push(item.releaseHomeWorkBtnNumber);
                            commitNumList.push(item.commitHomeWorkUser);
                            commitList.push(item.commitHomeWorkNumber);
                        });
                    }
                    this.lineChartOption = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: legendList
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: xAxisList
                        },
                        yAxis: {
                            type: 'value'
                        },
                        color: ['#C0222A', '#B5C334', '#FCCE10', '#E87C25'],
                        series: [
                            {
                                name: '布置人数',
                                type: 'line',
                                smooth: true,
                                symbolSize: 10,
                                data: peopleNumList
                            },
                            {
                                name: '布置次数',
                                type: 'line',
                                smooth: true,
                                symbolSize: 10,
                                data: numList
                            },
                            {
                                name: '提交人数',
                                type: 'line',
                                smooth: true,
                                symbolSize: 10,
                                data: commitNumList
                            },
                            {
                                name: '提交次数',
                                type: 'line',
                                smooth: true,
                                symbolSize: 10,
                                data: commitList
                            }
                        ]
                    };
                }).catch(() => {
                    this.loading1 = false;
                });
            },

            // 题库作业总数统计
            getQuesLib() {
                let timeRange = this.query.timeRange; // 时间范围"（默认本月，本月1，近三个月3，半年，一年12）,
                let type = '1'; // "作业类型"（0课外作业，1题库作业）
                this.loading2 = true;
                countAll(timeRange, type).then(response => {
                    this.loading2 = false;
                    let legendList = ['布置人数', '布置次数', '提交人数', '提交次数'];
                    let xAxisList = [];
                    let peopleNumList = []; // 布置人数
                    let numList = []; // 布置次数
                    let commitNumList = []; // 提交人数
                    let commitList = []; // 提交次数
                    let dataList = response.data.content;
                    dataList = dataList.sort(function(a, b) {
                        return Date.parse(a.date) - Date.parse(b.date);
                    });
                    if (dataList.length) {
                        dataList.forEach(item => {
                            xAxisList.push(item.date);
                            peopleNumList.push(item.releaseHomeWorkBtnUser);
                            numList.push(item.releaseHomeWorkBtnNumber);
                            commitNumList.push(item.commitHomeWorkUser);
                            commitList.push(item.commitHomeWorkNumber);
                        });
                    }
                    
                    this.bar1ChartOption = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            
                                type: 'line'        
                            }
                        },
                        legend: {
                            data: legendList
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: xAxisList
                        },
                        yAxis: {
                            type: 'value'
      
                        },
                        color: ['#2EC7C9', '#B6A2DE', '#5AB1EF', '#FFB980'],
                        series: [
                            {
                                name: '布置人数',
                                type: 'bar',
                                stack: '总量',
                                data: peopleNumList
                            },
                            {
                                name: '布置次数',
                                type: 'bar',
                                stack: '总量',
                                data: numList
                            },
                            {
                                name: '提交人数',
                                type: 'bar',
                                stack: '总量',
                                data: commitNumList
                            },
                            {
                                name: '提交次数',
                                type: 'bar',
                                stack: '总量',
                                data: commitList
                            }
                        ]
                    };
                  
                }).catch(() => {
                    this.loading2 = false;
                });
            },

            // 课外作业总数统计
            getHomeWork() {
                let timeRange = this.query.timeRange; // 时间范围"（默认本月，本月1，近三个月3，半年，一年12）,
                let type = '0'; // "作业类型"（0课外作业，1题库作业）
                this.loading3 = true;
                countAll(timeRange, type).then(response => {
                    this.loading3 = false;
                    let legendList = ['布置人数', '布置次数', '提交人数', '提交次数'];
                    let xAxisList = [];
                    let peopleNumList = []; // 布置人数
                    let numList = []; // 布置次数
                    let commitNumList = []; // 提交人数
                    let commitList = []; // 提交次数
                    let dataList = response.data.content;
                    dataList = dataList.sort(function(a, b) {
                        return Date.parse(a.date) - Date.parse(b.date);
                    });
                    if (dataList.length) {
                        dataList.forEach(item => {
                            xAxisList.push(item.date);
                            peopleNumList.push(item.releaseHomeWorkBtnUser);
                            numList.push(item.releaseHomeWorkBtnNumber);
                            commitNumList.push(item.commitHomeWorkUser);
                            commitList.push(item.commitHomeWorkNumber);
                        });
                    }
                    this.bar2ChartOption = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            
                                type: 'line'        
                            }
                        },
                        legend: {
                            data: legendList
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: xAxisList
                        },
                        yAxis: {
                            type: 'value'
      
                        },
                        color: ['#2EC7C9', '#B6A2DE', '#5AB1EF', '#FFB980'],
                        series: [
                            {
                                name: '布置人数',
                                type: 'bar',
                                stack: '总量',
                                data: peopleNumList
                            },
                            {
                                name: '布置次数',
                                type: 'bar',
                                stack: '总量',
                                data: numList
                            },
                            {
                                name: '提交人数',
                                type: 'bar',
                                stack: '总量',
                                data: commitNumList
                            },
                            {
                                name: '提交次数',
                                type: 'bar',
                                stack: '总量',
                                data: commitList
                            }
                        ]
                    };
                }).catch(() => {
                    this.loading3 = false;
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        padding: 20px 20px 10px;
        width: 1400px;
        margin: 0 auto;

    }
</style>                     